<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="180px">
				<el-form-item label="所属能力" prop="abilityId">
					<el-select v-model="dialog.addOrEdit.form.abilityId" filterable placeholder="请选择所属能力" width="100%">
						<el-option v-for="(value, key, index) in options.ability" :key="index" :label="value.label" :value="parseInt(key)"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="所属中台" prop="middlePlatformId">
					<el-select v-model="dialog.addOrEdit.form.middlePlatformId" filterable placeholder="请选择所属中台" width="100%">
						<el-option v-for="(value, key, index) in options.middlePlatform" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="服务名称" prop="serviceName">
					<el-input v-model="dialog.addOrEdit.form.serviceName" placeholder="请输入服务名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="服务编码" prop="serviceCode">
					<el-input v-model="dialog.addOrEdit.form.serviceCode" placeholder="请输入服务编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="服务调用方式" prop="invocationMode">
					<el-select
						v-model="dialog.addOrEdit.form.invocationMode"
						filterable
						placeholder="请选择服务调用方式"
						width="100%"
						@change="invocationModeChange"
					>
						<el-option v-for="(value, key, index) in options.serviceInvocation" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="是否频繁访问"
					prop="isFrequentAccess"
					v-if="dialog.addOrEdit.form.invocationMode === '11' || dialog.addOrEdit.form.invocationMode === '12'"
				>
					<el-switch
						v-model="dialog.addOrEdit.form.isFrequentAccess"
						inline-prompt
						:inactive-value="0"
						:active-value="1"
						active-text="是"
						inactive-text="否"
					></el-switch>
				</el-form-item>
				<el-form-item v-show="dialog.addOrEdit.form.isFrequentAccess" label="中断耗时阈值(秒)" prop="interruptTimeThreshold">
					<el-input-number v-model="dialog.addOrEdit.form.interruptTimeThreshold" :min="1" :max="99999" :step="1" :precision="0" />
				</el-form-item>
				<el-form-item label="快速响应上限阈值(毫秒)" prop="fastResUplimitThreshold">
					<el-input-number v-model="dialog.addOrEdit.form.fastResUplimitThreshold" :min="0" :max="99999" :step="1" :precision="0" />
				</el-form-item>
				<el-form-item label="正常响应上限阈值(毫秒)" prop="normalResUplimitThreshold">
					<el-input-number v-model="dialog.addOrEdit.form.normalResUplimitThreshold" :min="0" :max="99999" :step="1" :precision="0" />
				</el-form-item>
				<el-form-item label="慢响应上限阈值(毫秒)" prop="slowResUplimitThreshold">
					<el-input-number v-model="dialog.addOrEdit.form.slowResUplimitThreshold" :min="0" :max="99999" :step="1" :precision="0" />
				</el-form-item>
				<el-form-item label="备注" prop="remarks">
					<el-input
						v-model="dialog.addOrEdit.form.remarks"
						type="textarea"
						:rows="3"
						placeholder="请输入备注"
						maxlength="150"
						show-word-limit
					></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit()">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 告警配置 -->
		<el-dialog v-model="exDialog.alarm.open" :title="exDialog.alarm.title" :before-close="closeDialog" width="1000px" append-to-body center>
			<ConfAlarm :currentServiceId="currentServiceId"></ConfAlarm>
		</el-dialog>

		<!-- 资源配置 -->
		<el-dialog v-model="exDialog.resource.open" :title="exDialog.resource.title" :before-close="closeDialog" width="1000px" append-to-body center>
			<ConfResource :currentServiceId="currentServiceId"></ConfResource>
		</el-dialog>

		<!-- 返回码配置 -->
		<el-dialog v-model="exDialog.returnCode.open" :title="exDialog.returnCode.title" :before-close="closeDialog" width="1000px" append-to-body center>
			<ConfReturnCode :currentServiceId="currentServiceId"></ConfReturnCode>
		</el-dialog>

		<!-- 返回码配置 -->
		<el-dialog v-model="exDialog.indicatorConfig.open" :title="exDialog.indicatorConfig.title" width="1000px" append-to-body center>
			<IndicatorConfig
				:currentServiceId="currentServiceId"
				:tableRow="tableRow"
				:open="exDialog.indicatorConfig.open"
				@handleClosePeriodDialog="handleClosePeriodDialog"
			></IndicatorConfig>
		</el-dialog>
	</div>
</template>

<script lang="tsx">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds } from '@/api/middle-platform/conf-service';
import { middlePlatformOptions, mpAbilityOptions, serviceInvocationOptions } from '@/views/management/middle-platform/select-option';
import ConfAlarm from './service/alarm.vue';
import ConfResource from './service/resource.vue';
import ConfReturnCode from './service/return-code.vue';
import IndicatorConfig from './service/indicatorConfig.vue';

export default {
	name: 'ConfService',
	mixins: [Curd],
	components: {
		ConfAlarm,
		ConfResource,
		ConfReturnCode,
		IndicatorConfig,
	},
	data() {
		return {
			// 额外弹出层
			exDialog: {
				alarm: {
					open: false,
					title: '告警配置',
				},
				resource: {
					open: false,
					title: '资源配置',
				},
				returnCode: {
					open: false,
					title: '返回码配置',
				},
				indicatorConfig: {
					open: false,
					title: '指标&计费上报配置',
				},
			},
			// 当前服务id
			currentServiceId: undefined,
			tableRow: {},
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
			},
			// 下拉选项
			options: {
				// 所属中台
				middlePlatform: {},
				// 所属能力
				ability: {},
				// 服务调用方式
				serviceInvocation: {},
			},
			// 搜索表单
			formData: {
				...this.$route.query,
				pageSize: 10,
				pageNum: 1,
			},
			flag: false,
			formOptions: [
				{
					type: 'select',
					prop: 'abilityId',
					label: '所属能力',
					selectKey: 'id',
					isInitValue: false,
					attrs: {
						multiple: false,
						clearable: true,
					},
					api: {
						name: 'queryMpAbilityOptions',
					},
				},
				{
					type: 'input',
					prop: 'serviceName',
					label: '服务名称',
					placeholder: '输入服务名称模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'serviceCode',
					label: '服务编码',
					placeholder: '输入服务编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				// {
				// 	type: 'input',
				// 	prop: 'abilityCode',
				// 	label: '能力编码',
				// 	placeholder: '输入能力编码模糊搜索',
				// 	attrs: {
				// 		clearable: true,
				// 	},
				// },
				{
					type: 'input',
					prop: 'resourceCode',
					label: '资源编码',
					placeholder: '输入资源编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'url',
					label: 'URL',
					placeholder: '输入URL模糊搜索',
					attrs: {
						clearable: true,
					},
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '能力名称',
						prop: 'abilityId',
						formatter: (row: any, val: any) => {
							const ab = this.options.ability[val];
							return ab ? ab.label : '';
						},
					},
					{
						label: '能力编码',
						prop: 'abilityId',
						formatter: (row: any, val: any) => {
							const ab = this.options.ability[val];
							return ab ? ab.value : '';
						},
					},
					// {
					// 	label: '服务归属中台',
					// 	prop: 'middlePlatformId',
					// 	formatter: (row: any, val: any) => {
					// 		return this.options.middlePlatform[val];
					// 	},
					// },
					{
						label: '服务名称',
						prop: 'serviceName',
						renderXss: (row: any, val: any) => {
							return (
								<el-link type="primary" onClick={() => this.routeToPurchase(row)}>
									{row.serviceName}
								</el-link>
							);
						},
					},
					{
						label: '服务编码',
						prop: 'serviceCode',
					},
					{
						label: '服务调用方式',
						prop: 'invocationMode',
						formatter: (row: any, val: any) => {
							return this.options.serviceInvocation[val];
						},
					},
					{
						label: '系统名称',
						prop: 'systemName',
					},
					{
						label: '所属单位',
						prop: 'orgName',
					},
					{
						label: '备注',
						prop: 'remarks',
					},
					{
						label: '操作',
						prop: '',
						width: 400,
						operation: [
							{
								text: '告警配置',
								handler: (scope: any) => {
									this.currentServiceId = scope.row.id;
									this.exDialog.alarm.open = true;
								},
							},
							{
								text: '资源配置',
								handler: (scope: any) => {
									this.currentServiceId = scope.row.id;
									this.exDialog.resource.open = true;
								},
							},
							{
								text: '返回码配置',
								handler: (scope: any) => {
									this.currentServiceId = scope.row.id;
									this.exDialog.returnCode.open = true;
								},
							},
							{
								text: '指标&计费上报配置',
								handler: (scope: any) => {
									console.log(scope);
									this.currentServiceId = scope.row.id;
									this.tableRow = scope.row;
									this.exDialog.indicatorConfig.open = true;
								},
							},
						],
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd(this.beforeAdd) },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit() },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
				],
			},
			tableData: [],
		};
	},
	created() {
		this.formData.abilityId = this.$route.query.abilityId ? parseInt(this.$route.query.abilityId) : undefined;
		// 所属中台选项
		middlePlatformOptions().then((data: any) => {
			this.options.middlePlatform = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 所属能力
		mpAbilityOptions().then((data: any) => {
			this.options.ability = data.reduce((obj: any, item: any) => ((obj[item.id] = item), obj), {});
		});
		// 服务调用方式
		serviceInvocationOptions().then((data: any) => {
			this.options.serviceInvocation = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			abilityId: [{ required: true, message: '所属能力不能为空', trigger: 'change' }],
			// middlePlatformId: [{ required: true, message: '所属中台不能为空', trigger: 'change' }],
			serviceName: [{ required: true, message: '服务名称不能为空', trigger: 'blur' }],
			serviceCode: [{ required: true, message: '服务编码不能为空', trigger: 'blur' }],
			invocationMode: [{ required: true, message: '服务调用方式不能为空', trigger: 'change' }],
		};
	},
	methods: {
		closeDialog(done: Function) {
			this.currentServiceId = undefined;
			done();
		},
		beforeAdd() {
			return {
				isFrequentAccess: 0,
				interruptTimeThreshold: 300,
				fastResUplimitThreshold: 250,
				normalResUplimitThreshold: 750,
				slowResUplimitThreshold: 1500,
			};
		},
		routeToPurchase(row: object) {
			this.$router.push({
				path: '/management/middle-platform/purchase',
				query: {
					serviceCode: row.serviceCode,
				},
			});
		},
		invocationModeChange(val: any) {
			this.dialog.addOrEdit.form.isFrequentAccess = 0;
		},
		handleClosePeriodDialog() {
			this.exDialog.indicatorConfig.open = false;
			this.handleSearch(null);
		},
	},
};
</script>

<style scoped lang="scss">
:deep .el-input-number__decrease,
:deep .el-input-number__increase {
	background-color: rgba(0, 0, 0, 0.2) !important;
	border-right: none !important;
	border-left: none !important;
}
</style>
